<template>
	<view class="flex-col homepage">
		<view class="flex-row wrapper">
			<view class="flex-col flex-row wraper-col">
				<view class="flex-row box">
					<view class="u-line-1 text">{{self.name}}</view>
					<view class="box-col">
						<view class="u-line-1 text-two">{{self.relation}}</view>
					</view>
				</view>
				<view class="u-line-1 text-three">{{self.number}}</view>
			</view>
			<view class="flex-col wraper-col-two" @click="cutPat">
				<u-icon class="icon-list" name="list"></u-icon>
				<view class="u-line-1 text-four">切换就诊人</view>
			</view>


		</view>
		<view style="margin-top: 15px;margin-bottom: 15px;">
			<p style="margin-left: 10px;color: #AAAAAA;font-size: 16px;">就诊科室
				<span style="margin-left: 10px;color: #333333;">{{yuyuexinxi.divisionType.divisionName}}</span>
			</p>
		</view>
		<view style="margin-bottom: 15px;">
			<p style="margin-left: 10px;color: #AAAAAA;font-size: 16px;">医&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生
				<span style="margin-left: 10px;color: #333333;">{{yuyuexinxi.doctor.doctorName}}</span>
			</p>
		</view>
		<view style="margin-bottom: 15px;">
			<p style="margin-left: 10px;color: #AAAAAA;font-size: 16px;">我的序号
				<span style="margin-left: 10px;color: #333333;">{{waitingRecord.serial}}</span>
			</p>
		</view>
		<view style="width: 160px;height: 160px;background-color: #FD9234;border-radius: 50%;margin:0 auto;margin-top: 10px;">
			<p style="font-size: 14px;color: #FFFFFF;text-align: center;margin-top: 45px;">前方排队人数</p>
			<h3 style="font-size: 40px;color: #FFFFFF;text-align: center;margin-top: 10px;">{{a}}</h3>
		</view>
		<u-button type="primary" style="background-color: #006EFF;margin-top: 30px;" @click="gengxin"  text="更新"></u-button>
		<!-- 切换就诊人弹出框 -->
		<u-popup ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view scroll-y="true" style="height: 50rpx;" scroll-with-animation="true">
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				isCut: false,
				URL: 'http://localhost:9000/', //主域名
				self: '',
				single: '',
				patient: [],
				record: [],
				yuyuexinxi:[],
				waitingRecord:{},
				a:'',
			}
		},
		methods: {
			//切换就诊人
			cutPat() {
				this.isCut = !this.isCut
			},
			//切换就诊人
			cutPatient(id) {
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if (id == this.patient[i].id) {
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
			},
			gethouzhen(){
				uni.request({
					url: this.URL + "appointment/appointment/appointment/gethouzhen/" + this.self.id,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							console.log("成功")
							console.log(res.data.data.appointment)
							this.yuyuexinxi = res.data.data.appointment
						}
						
					}
				})
			},
			getxuhao(){
				uni.request({
					url: this.URL + "record/record/waiting-record/getxuhao/" + this.self.id,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							 console.log("获取序号成功")
							 console.log(res.data.data.waitingRecord)
							 this.waitingRecord = res.data.data.waitingRecord
						}
						
					}
				})
			},
			getRedis(){
				uni.request({
					url: this.URL + "record/record/waiting-record/getRedis/" + this.self.id,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							 console.log("当前位置："+res.data.data.a)
							 this.a = res.data.data.a
						}
						
					}
				})
			},
			gengxin(){
				uni.request({
					url: this.URL + "record/record/waiting-record/getRedis/" + this.self.id,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							 console.log("当前位置："+res.data.data.a)
							 this.a = res.data.data.a
						}
						
					}
				})
			}
		},
		onLoad() {
			this.user = uni.getStorageSync('user')
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + this.user.id,
				method: "GET",
				success: (res) => {
					console.log(res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].relation == "本人") {
								this.self = this.record[i]
							}
						}
						console.log(this.self)
					}
					this.gethouzhen();
					
					this.getxuhao();
					
					this.getRedis();
					
					
				}
			})
			
			
		}
	}
</script>

<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		height: 1334rpx;
		padding: 40rpx 0rpx 0rpx 21rpx;

		.wrapper {
			width: 698rpx;
			justify-content: space-between;
			margin-bottom: 40rpx;
			padding: 19rpx 40rpx 19rpx 30rpx;
			background: #f5f9ff;

			.wraper-col {
				width: 224rpx;
				margin-top: 8rpx;

				.box {
					width: 198rpx;
					margin-bottom: 22rpx;

					.text {
						width: 116rpx;
						margin-right: -8rpx;
						font-size: 32rpx;
					}

					.box-col {
						width: 90rpx;
						margin-top: 4rpx;
						padding: 2rpx 0rpx 2rpx 15rpx;
						border-radius: 40rpx;
						background: #e2edfe;

						.text-two {
							width: 70rpx;
							letter-spacing: 4rpx;
							color: #6d70ff;
						}
					}
				}

				.text-three {
					width: 100%;
					font-size: 2rpx;
					color: #aaaaaa;
				}
			}

			.wraper-col-two {
				width: 144rpx;
				padding: 30rpx 0rpx 12rpx 18rpx;

				.icon-list {
					width: 28rpx;
					margin: 0rpx 0rpx 16rpx 40rpx;
				}

				.text-four {
					width: 100%;
					font-size: 2rpx;
				}
			}
		}

		.wrapper-two {
			width: 300rpx;
			justify-content: space-between;
			margin: 0rpx 0rpx 30rpx 10rpx;

			.wraper-col-three {
				width: 122rpx;
				height: 44rpx;
				padding-left: 17rpx;
				border-radius: 40rpx;
				background: #006eff;

				.text-five {
					width: 96rpx;
					color: #fdfeff;
				}
			}

			.wraper-col-four {
				width: 154rpx;
				padding: 2rpx 0rpx 0rpx 23rpx;
				border-radius: 40rpx;
				background: #e4f0ff;

				.text-six {
					width: 116rpx;
					color: #006eff;
				}
			}
		}

		.wrapper-three {
			width: 698rpx;
			margin: 0rpx 0rpx 20rpx 4rpx;
			padding: 30rpx 13rpx 28rpx 13rpx;
			background: #ffffff;

			.wraper-row {
				width: 658rpx;
				justify-content: space-between;
				margin-right: auto;
				margin-bottom: 30rpx;
				margin-left: auto;

				.text-seven {
					width: 480rpx;
					font-size: 32rpx;
				}

				.text-eight {
					width: 122rpx;
					font-size: 28rpx;
					color: #006eff;
				}
			}

			.line {
				width: 100%;
			}

			.wraper-row-two {
				width: 402rpx;
				margin: 0rpx 0rpx 20rpx 122rpx;

				.text-nine {
					width: 100%;
					font-size: 2rpx;
				}

				.text-ten {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.wraper-row-three {
				width: 402rpx;
				margin: 0rpx 0rpx 20rpx 122rpx;

				.text-eleven {
					width: 100%;
					font-size: 2rpx;
				}

				.text-twelve {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.wraper-row-four {
				width: 402rpx;
				margin-left: 122rpx;

				.text-thirteen {
					width: 100%;
					font-size: 2rpx;
				}

				.text-fourteen {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.text-fifteen {
				top: 16rpx;
				left: -26rpx;
				position: absolute;
			}
		}

		.wrapper-four {
			width: 698rpx;
			margin-left: 4rpx;
			padding: 30rpx 13rpx 16rpx 13rpx;
			background: #ffffff;

			.text-sixteen {
				width: 480rpx;
				margin: 0rpx 0rpx -38rpx 6rpx;
				font-size: 32rpx;
			}

			.text-seventeen {
				width: 122rpx;
				margin: 0rpx 0rpx 30rpx 542rpx;
				font-size: 28rpx;
				color: #006eff;
			}

			.line {
				width: 100%;
			}

			.wraper-row-five {
				width: 402rpx;
				margin: 0rpx 0rpx 20rpx 122rpx;

				.text-eighteen {
					width: 100%;
					font-size: 2rpx;
				}

				.text-nineteen {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.wraper-row-six {
				width: 402rpx;
				margin: 0rpx 0rpx 20rpx 122rpx;

				.text-twenty {
					width: 100%;
					font-size: 2rpx;
				}

				.text-20 {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.wraper-row-seven {
				width: 402rpx;
				margin: 0rpx 0rpx 20rpx 122rpx;

				.text-21 {
					width: 100%;
					font-size: 2rpx;
				}

				.text-22 {
					width: 130rpx;
					top: 0rpx;
					left: -122rpx;
					font-size: 2rpx;
					position: absolute;
					color: #aaaaaa;
				}
			}

			.line-two {
				width: 646rpx;
			}

			.button {
				width: 196rpx;
				height: 68rpx;
				margin-left: 458rpx;
				font-size: 28rpx;
				background: #006eff;
				color: #ffffff;
			}
		}
	}
</style>
